import React ,{ useState }from 'react'
import type { ColumnsType } from 'antd/es/table';
import { Button } from 'antd'
import SearchForm from '@/components/SearchForm';
import CustomTable from '@/components/Table';


const formItemLayout = {
  labelCol: { flex: '80px' },
  wrapperCol: { flex: '1' },
};


export default function ApprovalPending () {

  const [,setSearchData]=useState({});
  const [total, ] = useState();
  const [params, setParams] = useState({
    current: 1,
    size: 10,
  });
  const [tableList, ] = useState<any[]>([]);
  const [loading, ] = useState(false);
  

  const formItems: any[] = [
    {
      type: 'group',
      key: 'group1',
      groupItems: [
        {
          type: 'select',
          label: '审核类型',
          name: 'type',
          key: 'type',
          items:[
            {
              value: '1',
              text: '1'
            },
            {
              value: '2',
              text: '2'
            }
          ]
        },
        {
          type: 'input',
          label: '审核编号',
          name: 'number',
          key: 'number',
        },
        {
          type: 'select',
          label: '发起人',
          name: 'people',
          key: 'people'
        }
      ],
    },
    {
      type: 'group',
      key: 'group2',
      groupItems: [
        {
          type: 'input',
          label: '发起人所属部门',
          name: 'ss',
          key: 'ss'
        },
        {
          type: 'dateRange',
          label: '创建时间',
          name: 'creteDate',
          key: 'creteDate'
        }
      ]
    }
  ];

  const columns: ColumnsType<InitiationAPI.InitiationColumns> = [
    {
      title: '审核类型',
      dataIndex: 'type',
      align: 'center',
    },
    {
      title: '审核编号',
      dataIndex: 'number',
      align: 'center',
      render: (text : any) => <span>{text || '--'}</span>,
    },
    {
      title: '审核附件',
      dataIndex: 'mesaageDate',
      align: 'center',
    },
    {
      title: '发起人',
      dataIndex: 'messageStatus',
      align: 'center',
    },
    {
      title: '发起人所属部门',
      dataIndex: 'messageStatus',
      align: 'center',
    },
    {
      title: '发起时间',
      dataIndex: 'messageStatus',
      align: 'center',
    },
    {
      title: '当前审核等待时间',
      dataIndex: 'messageStatus',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      fixed: 'right',
      width: 250,
      render: () => (
        <div>
          <Button type="link">查看</Button>
        </div>
      )
    }
  ]

  const onFinish = (values: any) => {
    console.log(values);
    // eslint-disable-next-line no-param-reassign
  };

  // 搜索重置
  const onReset = () => {
    setSearchData({});
  };
  return (
      <div>
          <SearchForm
            onFinish={onFinish}
            onReset={onReset}
            formItems={formItems}
            formLayout={formItemLayout}
          />
          
          <CustomTable
            params={params}
            columns={columns}
            total={total}
            pagination
            callback={(pagination: any) => {
              setParams(pagination);
            }}
            loading={loading}
            dataSource={tableList}
          />
      </div>
  )
}
